<template>
  <div class="login-container">
    <div class="login-box">
      <h3 class="login-title">请登录</h3>
      <el-form :model="loginForm" class="form">
        <el-form-item label="登录名" prop="name">
          <el-input
              type="text"
              v-model="loginForm.name"
              placeholder="请输入登录名"
              class="input"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pswd">
          <el-input
              type="password"
              v-model="loginForm.pswd"
              placeholder="请输入密码"
              class="input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              class="login-button"
              @click="gotoMain"
              :loading="loading"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="errtip" v-if="errorMsg">{{ errorMsg }}</div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import http from "@/axios/http";
import qs from "qs";
import router from "@/util/router.js";
import { useUserStore } from "@/store/userStore";

let loginForm = reactive({ name: "", pswd: "" });
const errorMsg = ref("");
const loading = ref(false); // 添加加载状态

function gotoMain() {
  loading.value = true; // 开始加载
  const logindata = {
    username: loginForm.name,
    password: loginForm.pswd,
  };
  http
      .post("/lyy/login", qs.stringify(logindata))
      .then((res) => {
        let result = res.data;
        loading.value = false; // 结束加载

        if (result.result === "success") {
          let tuser = result.data;

          let userStore = useUserStore();
          userStore.setToken(tuser.token);
          userStore.setUserrole(tuser.roleId);
          console.log(userStore.getUserrole);

          router.push({ path: "/", state: result.data });
        } else {
          errorMsg.value = result.error;
        }
      })
      .catch(() => {
        loading.value = false; // 网络错误时结束加载
        errorMsg.value = "网络错误，请稍后再试";
      });
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
}

.login-box {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  text-align: center;
}

.login-title {
  color: #888888;
  margin-bottom: 20px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input {
  width: 100%;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 8px;
  font-size: 14px;
}

.input:focus {
  border-color: #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}

.login-button {
  width: 100%;
  background-color: #409eff;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #66b1ff;
}

.login-button:active {
  background-color: #3a8ee6;
}

.errtip {
  color: red;
  font-style: italic;
  margin-top: 10px;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>